import React, { useRef, useState, useEffect } from 'react';
import { flushSync } from 'react-dom';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import { ModalForm, PageContainer, ProFormText, ProTable, ProFormUploadButton } from '@ant-design/pro-components';
import { Button, message, Image, Popconfirm,Space } from 'antd';
import errorImage from '@/assets/error.png';
import _ from '@/assets/utils';
import MODEL_API from '@/services/model';
import styled from 'styled-components';
import { history, useSearchParams, useModel, Helmet } from '@umijs/max';
import { ArrowLeftOutlined } from '@ant-design/icons';
const OneStyle = styled.div`
  .wogan{
    display:flex;
    justify-content: space-between;
    width: 100%;
    height: 120px;
    margin-bottom: 60px;
    ul{
      border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    padding-left: 0px;
    color: #303133;
    font-size: 16px;
    height: 100%;
    li{
      padding: 18px 20px;
      width: 380px;
      height: 57.6px;
    box-sizing: border-box;
    &:first-child{
      border-bottom: 1px solid #ebeef5;
    }
    }
    
    }
  }
`;
const RightStyle = styled.div`
.ant-page-header {
  position: relative;
  height: 80px;
  .ant-page-header-heading-title {
    position: absolute;
    top: 22px;
    left: 77px;
  }
  .ant-space {
    position: absolute;
    top: 25px;
    left: 52px;
    font-size:19px;
  }
}
`;
const Oreder_detail = function Oreder_detail() {
  const columns2 = [{
    title: '商品图片',
    dataIndex: 'goodsCoverImg',
    key: 'img',
    width: '20%',
    render: (dom) => {
      return <Image
        width={60}
        height={60}
        src={dom}
        fallback={errorImage}
      />;
    }
  }, {
    title: '商品编号',
    dataIndex: 'goodsId',
    width: '20%',
    key: 'ID'
  }, {
    title: '商品名',
    dataIndex: 'goodsName',
    width: '20%',
    key: 'name'
  }, {
    title: '商品数量',
    dataIndex: 'goodsCount',
    width: '20%',
    key: 'count'
  }, {
    title: '商品价格',
    dataIndex: 'sellingPrice',
    width: '20%',
    key: 'price'
  }];

  /* 获取id */
  const [usp] = useSearchParams();
  let aaa = usp.get('id');

  /* 定义需要的状态 */
  const box1 = useRef();
  const box2 = useRef();
  const box3 = useRef();



  /* 获取订单详情数据 */
  const queryTableData = async ({ id = aaa }) => {
    let tableData = [],
      total = 0;

    try {
      let { resultCode, data } = await MODEL_API.ordersId(id);
      if (+resultCode === 200) {
        let { newBeeMallOrderItemVOS, createTime,
          orderNo,
          orderStatusString } = data;
        tableData = newBeeMallOrderItemVOS;
        box1.current.innerHTML = `${orderStatusString}`
        box2.current.innerHTML = `${createTime}`
        box3.current.innerHTML = `${orderNo}`
      }
    } catch (_) { }
    return {
      success: true,
      data: tableData,
      total
    }
  };
  const ggg=()=>{
    history.back()
  }
  return <RightStyle>
  <PageContainer content={<Space><ArrowLeftOutlined onClick={ggg}/></Space>}>
    <OneStyle>
    <div className="wogan">
        <ul>
          <li>订单状态</li>
          <li ref={box1}></li>
          </ul>
          <ul>
          <li>创建时间</li>
          <li ref={box2}></li>
          </ul>
          <ul>
          <li>订单号</li>
          <li ref={box3}></li>
          </ul>
    </div>

      <ProTable
        columns={columns2}
        rowKey="goodsId"
        search={false}
        request={queryTableData}
        options={{
          density: false,
          reload: false,
          setting: false,
        }}
        pagination={{
          pageSize: 10,
          hideOnSinglePage: false,
          showTotal: false,
          showQuickJumper: false,
          showSizeChanger: false,
          hideOnSinglePage:true
        }}
        rowSelection={false}
      />
    </OneStyle>
  </PageContainer>
  </RightStyle>
}
export default Oreder_detail;
